<template>
  <div class="svg-demo-container layout-pd">
    <el-card header="svgIcon：演示（支持本地svg）" shadow="hover">
      <SvgIcon :size="30" color="red" name="iconfont icon-shuju1"/>
      <SvgIcon :size="30" color="var(--el-color-primary)" name="ele-Trophy"/>
      <SvgIcon :size="30" color="#09f" name="fa fa-flag-checkered"/>
      <SvgIcon :name="logoMini" :size="30" color="#09f"/>
    </el-card>
    <el-card class="mt15" header="svgIcon：参数" shadow="hover">
      <el-table :data="state.tableData" style="width: 100%">
        <el-table-column label="参数" prop="a1"></el-table-column>
        <el-table-column label="说明" prop="a2"></el-table-column>
        <el-table-column label="类型" prop="a3"></el-table-column>
        <el-table-column label="可选值" prop="a4"></el-table-column>
        <el-table-column label="默认值" prop="a5"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script lang="ts" name="makeSvgDemo" setup>
import {reactive} from 'vue';
import logoMini from '/@/assets/logo.png';

// 定义变量内容
const state = reactive({
  tableData: [
    {
      a1: 'name',
      a2: 'svg 图标组件名字 / svg 路径 url',
      a3: 'string',
      a4: '',
      a5: '',
    },
    {
      a1: 'size',
      a2: 'svg 大小',
      a3: 'number',
      a4: '',
      a5: 14,
    },
    {
      a1: 'color',
      a2: 'svg 颜色',
      a3: 'string',
      a4: '',
      a5: '',
    },
  ],
});
</script>
